<template>
  <div class="sort">
    <div class="item" v-for="(item, index) in infoArr" @click="itemClick(index)" :key="index">
      <span :class="{ active: index == isActive }">{{ item.title }}</span
      >&nbsp;<i class="iconfont" :class="item.iconClass"></i>
    </div>
  </div>
</template>

<script>
// import { getProductList } from '@/http/index.js'
export default {
  data() {
    return {
      isActive: 0,
      orderBy: '',
      infoArr: [
        {
          title: '默认排序',
          iconClass: '',
        },
        {
          title: '升序',
          iconClass: 'icon-shangjiantou',
        },
        {
          title: '降序',
          iconClass: 'icon-xiajiantou',
        },
        {
          title: '筛选',
          iconClass: 'icon-shaixuan',
        },
      ],
    }
  },
  methods: {
    itemClick(index) {
      if (index == this.infoArr.length - 1) {
        return
      }
      this.isActive = index
      if (index == 0) {
        this.orderBy = 'default'
      } else if (index == 1) {
        this.orderBy = 'price_asc'
      } else {
        this.orderBy = 'price_desc'
      }
      this.$bus.$emit('sort', this.orderBy)
      // getProductList({ orderBy: this.orderBy }).then()
    },
  },
}
</script>

<style lang="scss" scoped>
.sort {
  position: fixed;
  top: 100px;
  left: 0;
  z-index: 10;
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 100px;
  background-color: white;
  .item {
    flex: 1;
    height: 100%;
    text-align: center;
    line-height: 100px;
    font-size: 30px;
    border-top: 0.013333rem solid #dcdcdc;
    border-bottom: 0.013333rem solid #dcdcdc;
    .active {
      color: red;
    }
  }
}
</style>
